<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>购物车</title>
    <style>
        table{
            width: 900px;
            border-collapse: collapse;
            margin: 0 auto;
        }
        td{
            height: 80px;
            border: 1px solid #CADEFF;
            text-align: center;
            color: rgb(167, 159, 159);
            font-size: 14px;
        }
        th{      
            border-top: 3px solid #a7cbff;
            background: #e2f2ff;
            text-align: center;
        }
        
        
        .count-input{
            width: 50px;
            text-align: center;
            height: 21px;
  

        }
        tr:hover{
            background-color:#e2f2ff;
        }
        #foot td{
            height: 30px;
        }
        .reduce{
            position: relative;
            left: 5px;
            bottom: 2px;
        }
        .add{
            position: relative;
            right: 5px;
            bottom: 2px;
        }
        span{
            cursor: pointer;
        }
        .reduce,.add{
            display: inline-block;
            width: 20px;
            height: 25px;
            background-color: #ccc;
            color: white;
            cursor: pointer;
        }
        
        #allPrice{
            display: inline-block;
            width: 50px;
        }
        tfoot tr td{
            text-align: left;
        }
    </style>

</head>

<body>
    <div class="catbox">
        <table>
            <thead>
                <tr>
                    <th><input type="checkbox" id="ckAll">全选</th>
                    <th>商品</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody class="tb">
                <!-- <tr class="inline">
                    <td><input type="checkbox" name="ck"></td>
                    <td>Casio/卡西欧 EX-TR350</td>
                    <td>5999.88</td>
                    <td>
                        <span class="reduce">-</span>
                        <input type="text" value="1" class="count-input">
                        <span class="add">+</span>
                    </td>
                    <td>5999.88</td>
                    <td>
                        <span class="delete">删除</span>
                    </td>
                </tr> -->
            </tbody>  
            <tfoot id="foot">
            <tr>
                <td><input class="del" type="button" value="批量删除"></td>
                <td></td>
                <td></td>
                <td></td>
                <td>总数：<span id="allCount"></span></td>
                <td>总价：<span id="allPrice"></span></td>
            </tr>
            </tfoot>
        </table>
    
    </div>


    <script src="../js/ajax.js"></script>
    <script>

        // 动态生成购物车列表的时候
        //    三目运算符判断数量是否可以继续减
        //    小计也进行计算 ()


        // 删除的时候(批量删除的时候)  ---- 慢半拍 (ajax请求需要时间)


        // 首先判断是否登录
        const username = localStorage.getItem('LOGIN_USER') ;
        console.log(username);


        const oTb = document.querySelector('.tb') ;
        const oBox = document.querySelector('.catbox') ;



        if(username) {
            ajax({
                type : 'post' , 
                url : '../php/showCart.php' ,
                data : {
                    username
                } ,
                cb : data => {
                    console.log(data);
                    // 判断是否有数据
                    if(!data.status) {
                        // 购物车不显示
                        oBox.style.display = 'none' ;
                        alert('购物车空空如也，请去逛逛把') ;
                        location.href = './03_list.html' ;
                        return ;
                    }
                    let html = '' ;
                    const { list } = data ;
                    console.log(list);
                    list.forEach( ({
                        num , 
                        goods_title ,
                        good_img ,
                        goods_price ,
                        goods_id ,
                        cart_id
                    }) => {
                        html += `
                            <tr class="inline" cart-id="${cart_id}">
                                <td><input class="checkone" type="checkbox" name="ck"></td>
                                <td>${goods_title}</td>
                                <td>${goods_price}</td>
                                <td goods-id="${goods_id}" price="${goods_price}">
                                    <span class="reduce">${num>1?'-':''}</span>
                                    <input type="text" value="${num}" class="count-input">
                                    <span class="add" >+</span>
                                </td>
                                <td>${goods_price * num}</td>
                                <td>
                                    <span class="delete">删除</span>
                                </td>
                            </tr>
                        `
                        
                    })
                    
                    oTb.innerHTML = html ;

                }
            })
        } else {
            alert('请登录') ;
            location.href = './01_login.html?AAAAA=' + location.href ;
        }



        // ajax是异步的    使用事件委托  --- 可以给将来的对象绑定事件
        // const oOnes = document.querySelectorAll('.checkone') ;
        // console.log(oOnes);




        // 事件委托
        oBox.onclick = function(e) {
            const target = e.target ;
            // 数量加
            //    访问加入购物车的接口  addToCart (username / num / id)
            //    商品id可以绑定在标签上(自定义属性goods-id)


            if(target.className === 'add') {
                const id = target.parentElement.getAttribute('goods-id') ;
                ajax({
                    type : 'post' ,
                    url : '../php/addToCart.php' ,
                    data : {
                        username ,
                        num : 1 ,
                        id 
                    } ,
                    cb : data => {
                        console.log(data);
                        const {status} = data ;
                        if(status) {
                            // 数量
                            target.previousElementSibling.value++ ;
                            // 小计
                            // target.parentElement.nextElementSibling.innerHTML = target.previousElementSibling.value * target.parentElement.getAttribute('price') ;    // 利用自定义属性
                            target.parentElement.nextElementSibling.innerHTML = target.previousElementSibling.value * target.parentElement.previousElementSibling.innerHTML ;
                            // 判断是否有减号
                            if(target.previousElementSibling.previousElementSibling.innerHTML === '') {
                                target.previousElementSibling.previousElementSibling.innerHTML = '-'
                            }
                        }
                    }
                })
                return ;
            }

            // 减号   num变成-1
            if(target.innerHTML === '-') {
                const id = target.parentElement.getAttribute('goods-id') ;
                ajax({
                    type : 'post' ,
                    url : '../php/addToCart.php' ,
                    data : {
                        username ,
                        num : -1 ,
                        id 
                    } ,
                    cb : data => {
                        console.log(data);
                        const {status} = data ;
                        if(status) {
                            target.nextElementSibling.value--;
                            target.parentElement.nextElementSibling.innerHTML = target.nextElementSibling.value * target.parentElement.previousElementSibling.innerHTML ;
                            // 数量是1   清空-
                            if(target.nextElementSibling.value == 1) {
                                target.innerHTML = ''
                            }
                        }
                    }
                })
                return ;
            }


            // 删除
            if(target.className === 'delete') {
                const id = target.parentElement.parentElement.getAttribute('cart-id') ;
                ajax({
                    type : 'post' , 
                    url : '../php/delete.php' ,
                    data : {
                        id 
                    } ,
                    cb : data => {
                        console.log(data);
                        const {status , msg} = data ;
                        if(status) {
                            target.parentElement.parentElement.remove() ;
                            // 判断数据是不是删完了？？？？？？？？？？？
                            // 如果没有子元素就判断
                            if(oTb.children.length === 0) {
                                alert('空空如也')
                            }
                        } else {
                            alert(msg);
                        }
                    }
                })
                return ;
            }

            // 批量删除
            if(target.className === 'del') {
                // 判断是否勾选
                const oOnes = document.querySelectorAll('.checkone') ;
                console.log(oOnes);
                oOnes.forEach( v => {
                    // 判断是否勾选
                    if(v.checked) {
                        // 获取tr身上的自定义属性
                        const id = v.parentElement.parentElement.getAttribute('cart-id') ;

                        // 先删除页面()
                        v.parentElement.parentElement.remove() ;
                        // 判断数据是不是删完了？？？？？？？？？？？

                        // 再删数据库
                        ajax({
                            type : 'post' , 
                            url : '../php/delete.php' ,
                            data : {
                                id 
                            } ,
                            cb : data => {
                                console.log(data);
                                // if(data.status) {
                                    //   加载延迟的问题    所以代码写在了上面
                                //     v.parentElement.parentElement.remove() ;
                                //     // 判断数据是不是删完了？？？？？？？？？？？
                                // }
                            }
                        })
                    }
                })
            }
        }



    </script>



</body>


</html>